
//更换头像区域的回显
async function  getInfoPic(){
    const res = await indexAxios('userinfo')
    cropper.replace(res.data.data.user_pic)
}


// 1. 初始化裁剪插件
let cropper = new Cropper($("#image")[0], {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
});
getInfoPic()




//点击button实现文件上传

const input = document.querySelector('input')
const button = document.querySelector('button')
button.onclick = function () {
    input.click()
}

input.onchange = function () {
    let url = URL.createObjectURL(this.files[0])
    cropper.replace(url)
}

// 4. 确定按钮 - 点击事件
$(".sure").on("click", async ev => {
    var canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
        width: 100,
        height: 100
    });
    var base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
    // image/jpeg 是对标签输出的base64字符串做出一个类型的标记
    // 等一会儿把头像base64字符串, 放到img标签的src上, img标签根据类型就知道如何解析这串base64字符串

    // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str);
    var argStr = "avatar=" + base64Str;
    // upHeadImgAPI(argStr, res => {
    //     // 让父窗口的getInfo方法执行, 请求最新的头像更新父页面
    //     // window.parent.getInfo();

    // })


    const resPic = await userInfoAxios('update/avatar', argStr)
    if(resPic.data.status===0){
    window.parent.headPic();
    }


})